<!doctype html>
<html class="fixed">

<head>

	<!-- Basic -->
	<meta charset="UTF-8">

	<title>添加考试</title>
	<meta name="keywords" content="HTML5 Admin Template" />
	<meta name="description" content="JSOFT Admin - Responsive HTML5 Template">


	<!-- Mobile Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

	<!-- Web Fonts  -->
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light"
		rel="stylesheet" type="text/css">

	<!-- Vendor CSS -->
	<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.css" />
	<link rel="stylesheet" href="assets/vendor/bootstrap-table-master/bootstrap-table.css" />
	<link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.css" />
	<link rel="stylesheet" href="assets/vendor/magnific-popup/magnific-popup.css" />
	<link rel="stylesheet" href="assets/vendor/bootstrap-datepicker/css/datepicker3.css" />

	<!-- Specific Page Vendor CSS -->
	<link rel="stylesheet" href="assets/vendor/select2/select2.css" />
	<link rel="stylesheet" href="assets/vendor/jquery-datatables-bs3/assets/css/datatables.css" />

	<!-- Theme CSS -->
	<link rel="stylesheet" href="assets/stylesheets/theme.css" />

	<!-- Skin CSS -->
	<link rel="stylesheet" href="assets/stylesheets/skins/default.css" />

	<!-- Theme Custom CSS -->
	<link rel="stylesheet" href="assets/stylesheets/theme-custom.css">

	<!-- Head Libs -->
	<script src="assets/vendor/modernizr/modernizr.js"></script>

</head>

<body>
	<section class="body">
		<div>
			<section role="main">			
				<!-- start: page -->
				<div class="row">
					<div class="col-xs-12">
						<section class="panel form-wizard" id="w1">
							<header class="panel-heading">
								<div class="panel-actions">
									<a href="#" class="fa fa-caret-down"></a>
									<a href="#" class="fa fa-times"></a>
								</div>

								<h2 class="panel-title">添加考试</h2>
							</header>
							<div class="panel-body panel-body-nopadding">
								<div class="wizard-tabs">
									<ul class="wizard-steps">
										<li class="active">
											<a href="#group-configuration" data-toggle="tab" class="text-center">
												<span class="badge hidden-xs">1</span>
												组卷配置
											</a>
										</li>
										<li>
											<a href="#exam-authority" data-toggle="tab" class="text-center">
												<span class="badge hidden-xs">2</span>
												考试权限
											</a>
										</li>
										<li>
											<a href="#Added-configuration" data-toggle="tab" class="text-center">
												<span class="badge hidden-xs">3</span>
												补充配置
											</a>
										</li>
									</ul>
								</div>
								<div style="padding: 0 15px;">
									<ul class="pager" style="margin-bottom: 0px;">
										<li class="previous disabled">
											<a><i class="fa fa-angle-left"></i> 上一步</a>
										</li>
										<li class="finish hidden pull-right">
											<a>完成</a>
										</li>
										<li class="next">
											<a>下一步 <i class="fa fa-angle-right"></i></a>
										</li>
									</ul>
								</div>
								<form class="form-horizontal" novalidate="novalidate">
									<div class="tab-content">
										<div id="group-configuration" class="tab-pane active">
											<!-- 组卷配置 -->
											<table id="tb_examSettings"></table>
										</div>
										<div id="exam-authority" class="tab-pane">
											<!-- 考试权限 -->
											<section class="panel">
												<div class="panel-body">
													<div role="radiogroup" class="el-radio-group">
														<label role="radio" tabindex="0" class="el-radio is-checked">
															<span class="el-radio__input">
																<input type="radio" aria-hidden="true" name="optradio"
																	tabindex="-1" class="el-radio__original" value=""
																	checked>
															</span>
															<span class="el-radio__label">完全公开</span>
														</label>
														<label role="radio" tabindex="-1" class="el-radio">
															<span class="el-radio__input">
																<input type="radio" aria-hidden="true" name="optradio"
																	tabindex="-1" class="el-radio__original" value="">
															</span>
															<span class="el-radio__label">部门开放</span>
														</label>
													</div>
													<div class="alert alert-warning alert-dismissable">
														<button type="button" class="close" data-dismiss="alert"
															aria-hidden="true">
															&times;
														</button>
														开放的，任何人都可以进行考试！
													</div>
												</div>
											</section>
										</div>
										<div id="Added-configuration" class="tab-pane">
											<!-- 补充配置 -->
											<div class="panel-body">
												<div class="form-group">
													<label class="col-sm-2 control-label">考试名称 <span class="required">*</span></label>
													<div class="col-sm-10">
														<input type="text" name="examName" class="form-control" placeholder="请输入考试名称" required/>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">考试描述 <span class="required">*</span></label>
													<div class="col-sm-10">
														<textarea name="examDescribe" rows="2" class="form-control" placeholder="请输入考试描述" required></textarea>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">总分数 <span class="required">*</span></label>
													<div class="col-sm-10">
														<input type="text" name="examTotal" class="form-control" required/>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">及格分 <span class="required">*</span></label>
													<div class="col-sm-10">
														<input type="text" name="examMark" class="form-control" placeholder="请输入及格分" required/>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">考试时长(分钟) <span class="required">*</span></label>
													<div class="col-sm-10">
														<input type="text" name="examTimeLength" class="form-control" placeholder="请输入考试时长" required/>
													</div>
												</div>
											</div>
										</div>
									</div>
								</form>
							</div>
						</section>
					</div>
				</div>

			</section>
		</div>

		<aside id="sidebar-right" class="sidebar-right">
			<div class="nano">
				<div class="nano-content">
					<a href="#" class="mobile-close visible-xs">
						Collapse <i class="fa fa-chevron-right"></i>
					</a>

					<div class="sidebar-right-wrapper">

						<div class="sidebar-widget widget-calendar">
							<h6>Upcoming Tasks</h6>
							<div data-plugin-datepicker data-plugin-skin="dark"></div>

							<ul>
								<li>
									<time datetime="2014-04-19T00:00+00:00">04/19/2014</time>
									<span>Company Meeting</span>
								</li>
							</ul>
						</div>

						<div class="sidebar-widget widget-friends">
							<h6>Friends</h6>
							<ul>
								<li class="status-online">
									<figure class="profile-picture">
										<img src="assets/images/!sample-user.jpg" alt="Joseph Doe" class="img-circle">
									</figure>
									<div class="profile-info">
										<span class="name">Joseph Doe Junior</span>
										<span class="title">Hey, how are you?</span>
									</div>
								</li>
								<li class="status-online">
									<figure class="profile-picture">
										<img src="assets/images/!sample-user.jpg" alt="Joseph Doe" class="img-circle">
									</figure>
									<div class="profile-info">
										<span class="name">Joseph Doe Junior</span>
										<span class="title">Hey, how are you?</span>
									</div>
								</li>
								<li class="status-offline">
									<figure class="profile-picture">
										<img src="assets/images/!sample-user.jpg" alt="Joseph Doe" class="img-circle">
									</figure>
									<div class="profile-info">
										<span class="name">Joseph Doe Junior</span>
										<span class="title">Hey, how are you?</span>
									</div>
								</li>
								<li class="status-offline">
									<figure class="profile-picture">
										<img src="assets/images/!sample-user.jpg" alt="Joseph Doe" class="img-circle">
									</figure>
									<div class="profile-info">
										<span class="name">Joseph Doe Junior</span>
										<span class="title">Hey, how are you?</span>
									</div>
								</li>
							</ul>
						</div>

					</div>
				</div>
			</div>
		</aside>
	</section>

	<!-- <div id="dialog" class="modal-block mfp-hide">
		<section class="panel">
			<header class="panel-heading">
				<h2 class="panel-title">确定吗？</h2>
			</header>
			<div class="panel-body">
				<div class="modal-wrapper">
					<div class="modal-text">
						<p>确定删除这行内容吗？</p>
					</div>
				</div>
			</div>
			<footer class="panel-footer">
				<div class="row">
					<div class="col-md-12 text-right">
						<button id="dialogConfirm" class="btn btn-primary">确定</button>
						<button id="dialogCancel" class="btn btn-default">取消</button>
					</div>
				</div>
			</footer>
		</section>
	</div> -->

	<!-- Vendor -->
	<script src="assets/vendor/jquery/jquery.js"></script>
	<script src="assets/vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
	<script src="assets/vendor/bootstrap/js/bootstrap.js"></script>
	<script src="assets/vendor/bootstrap-table-master/bootstrap-table.js"></script>
	<script src="assets/vendor/bootstrap-table-master/bootstrap-table-zh-CN.js"></script>
	<script src="assets/vendor/nanoscroller/nanoscroller.js"></script>
	<script src="assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
	<script src="assets/vendor/magnific-popup/magnific-popup.js"></script>
	<script src="assets/vendor/jquery-placeholder/jquery.placeholder.js"></script>

	<!-- Specific Page Vendor -->
	<script src="assets/vendor/jquery-validation/jquery.validate.js"></script>
	<script src="assets/vendor/bootstrap-wizard/jquery.bootstrap.wizard.js"></script>
	<script src="assets/vendor/pnotify/pnotify.custom.js"></script>

	<!-- Theme Base, Components and Settings -->
	<script src="assets/javascripts/theme.js"></script>

	<!-- Theme Custom -->
	<script src="assets/javascripts/theme.custom.js"></script>

	<!-- Theme Initialization Files -->
	<script src="assets/javascripts/theme.init.js"></script>


	<!-- Examples -->
	<script src="assets/javascripts/forms/examples.wizard.js"></script>
	<script>
		$(function () {

			//1.初始化Table
			var oTable = new TableInit();
			oTable.Init();

			//2.初始化Button的点击事件
			var oButtonInit = new ButtonInit();
			oButtonInit.Init();

		});


		var TableInit = function () {
			var oTableInit = new Object();
			//初始化Table
			oTableInit.Init = function () {
				$('#tb_examSettings').bootstrapTable({
					url: '/Home/GetexamSetting',         //请求后台的URL（*）
					method: 'get',                      //请求方式（*）
					toolbar: '#toolbar',                //工具按钮用哪个容器
					striped: true,                      //是否显示行间隔色
					cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
					pagination: true,                   //是否显示分页（*）
					sortable: false,                     //是否启用排序
					sortOrder: "asc",                   //排序方式
					queryParams: oTableInit.queryParams,//传递参数（*）
					sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
					pageNumber: 1,                       //初始化加载第一页，默认第一页
					pageSize: 10,                       //每页的记录行数（*）
					pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
					search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
					strictSearch: true,
					showColumns: true,                  //是否显示所有的列
					showRefresh: true,                  //是否显示刷新按钮
					minimumCountColumns: 2,             //最少允许的列数
					clickToSelect: true,                //是否启用点击选中行
					height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
					uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
					showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
					cardView: false,                    //是否显示详细视图
					detailView: false,                   //是否显示父子表
					columns: [{
						checkbox: true
					}, {
						field: 'bankName',
						title: '题库名称'
					}, {
						field: 'radioNum',
						title: '单选数量'
					}, {
						field: 'radioScore',
						title: '单选分数'
					}, {
						field: 'multipleNum',
						title: '多选数量'
					}, {
						field: 'multipleScore',
						title: '多选分数'
					}, {
						field: 'judgeNum',
						title: '判断题数量'
					}, {
						field: 'judgeScore',
						title: '判断题分数'
					}, {
						title: '操作',
						align: 'center',
						formatter: function (value, row, index) {
							var actions = [];
							actions.push('<a class="btn btn-success btn-xs href="javascript:void(0)" onclick="$.operate.edit(\'' + row.examId + '\')"><i class="fa fa-edit"></i>修改</a> ');
							actions.push('<a class="btn btn-danger btn-xs href="javascript:void(0)" onclick="$.operate.remove(\'' + row.examId + '\')"><i class="fa fa-eye"></i>考试详情</a>');
							// actions.push('<a class="btn btn-info btn-xs href="javascript:void(0)" onclick="resetPwd(\'' + row.examId + '\')"><i class="fa fa-key"></i>重置密码</a>');
							return actions.join('');
						}
					}]
				});
			};

			//得到查询的参数
			oTableInit.queryParams = function (params) {
				var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
					limit: params.limit,   //页面大小
					offset: params.offset,  //页码
					examSettingName: $("#txt_search_examSettingName").val(),
					statu: $("#txt_search_statu").val()
				};
				return temp;
			};
			return oTableInit;
		};


		var ButtonInit = function () {
			var oInit = new Object();
			var postdata = {};

			oInit.Init = function () {
				//初始化页面上面的按钮事件
			};

			return oInit;
		};
	</script>
	<!-- 为单选按钮(选中的选项)添加样式 -->
	<script>
		$(function () {
			$(".el-radio-group input").change(function () {
				$(":checked").parent().parent().addClass("is-checked").siblings().removeClass("is-checked");
			});
		});
	</script>
	<!-- 展示树型复选框 -->

	<style>
		.el-radio-group label {
			width: auto !important;
			text-align: center;
		}

		.el-radio__label {
			line-height: 25px !important;
			font-size: 14px !important;
			padding: 10px;
		}
	</style>
</body>

</html>